<!DOCTYPE html>
<html>
<head>
    <!-- 公共页面 -->
    <#include "/admin/view/include/common.html">
    <!-- 公共页面 /-->
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">
    <!-- 页面头部 -->
    <#include "/admin/view/include/header.html">
    <!-- 页面头部 /-->
    <!-- 导航侧栏 -->
    <#include "/admin/view/include/menu.html">
    <!-- 导航侧栏 /-->
    <!-- 内容区域 -->
    <div class="content-wrapper" id="contentDiv">
        <!-- 正文区域 -->
        <section class="content">
            <form id="inputForm">
                <div class="box-body">
                    <!--tab页-->
                    <div class="nav-tabs-custom">
                        <!--tab头-->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab-pic" data-toggle="tab">生成静态</a></li>
                        </ul>
                        <!--tab头/-->
                        <!--tab内容-->
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-basic">
                                <div class="row data-type">
                                    <div class="col-md-2 title">生成类型</div>
                                    <div class="col-md-10 data">
                                        <select class="form-control" name="type" id="type">
                                            <option value="0">全部</option>
                                            <option value="1">首页</option>
                                            <option value="2">栏目页</option>
                                            <option value="3">内容页</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 title" id="categoryIdTitle" style="display: none;">栏目</div>
                                    <div class="col-md-10 data" id="categoryIdData" style="display: none;">
                                        <select class="form-control" id="categoryId" name="categoryId">
                                            <#list categoryTree as categoryItem>
                                            <option value="${categoryItem.id}">
                                                <#if categoryItem.grade != 0>
                                                <#list 0..categoryItem.grade as i>
                                                &nbsp;&nbsp;
                                                </#list>
                                                </#if>
                                                ${categoryItem.name}
                                            </option>
                                            </#list>
                                        </select>
                                    </div>
                                    <div class="col-md-2 title" id="startDateTitle" style="display: none;">起始日期</div>
                                    <div class="col-md-10 data" id="startDateData" style="display: none;">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right datetimepicker" id="startDate" name="startDate" value="<#if defaultStartDate??>${date(defaultStartDate,'yyyy-MM-dd')}</#if>">
                                        </div>
                                    </div>
                                    <div class="col-md-2 title" id="endDateTitle" style="display: none;">结束日期</div>
                                    <div class="col-md-10 data" id="endDateData" style="display: none;">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right datetimepicker" id="endDate" name="endDate" value="<#if defaultEndDate??>${date(defaultEndDate,'yyyy-MM-dd')}</#if>">
                                        </div>
                                    </div>
                                    <div class="col-md-2 title" id="countTitle" style="display: none;">每次生成数</div>
                                    <div class="col-md-10 data" id="countData" style="display: none;">
                                        <input type="text" class="form-control" placeholder="每次生成数" id="count" name="count" value="100">
                                    </div>
                                    <div class="col-md-2 title" id="statusTitle" style="display: none;">&nbsp;</div>
                                    <div class="col-md-10 data" id="statusData" style="display: none;">
                                        <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                                            <div id="status"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--工具栏-->
                            <div class="box-tools text-center">
                                <button type="submit" class="btn bg-maroon">保存</button>
                                <button type="button" class="btn bg-default" onclick="history.back(-1);">返回</button>
                            </div>
                            <!--工具栏/-->
                        </div>
                        <!--tab内容/-->
                    </div>
                    <!--tab页/-->
                </div>
            </form>
        </section>
        <!-- 正文区域 /-->
    </div>
    <!-- 内容区域 /-->
    <!-- 底部导航 -->
    <#include "/admin/view/include/footer.html">
    <!-- 底部导航 /-->
</div>
</body>
</html>
<!---->
<script>
    $(document).ready(function() {
        // 激活导航位置
        setSidebarActive("admin-html");
    });
</script>
<script type="text/javascript">
    $().ready(function() {

        var $inputForm = $("#inputForm");
        var $type = $("#type");
        var $categoryId = $("#categoryId");
        var $startDate = $("#startDate");
        var $endDate = $("#endDate");
        var $count = $("#count");
        var $status = $("#status");
        var $submit = $("input:submit");
        var first;
        var generateCount;
        var generateTime;
        var type;
        var categoryId;
        var startDate;
        var endDate;
        var count;

        // 生成类型
        $type.change(function() {
            var $this = $(this);
            if ($this.val() == 3) {
                $("#categoryIdTitle").show();
                $("#categoryIdData").show();
                $("#startDateTitle").show();
                $("#startDateData").show();
                $("#endDateTitle").show();
                $("#endDateData").show();
                $("#countTitle").show();
                $("#countData").show();
            } else if ($this.val() == 2) {
                $("#categoryIdTitle").show();
                $("#categoryIdData").show();
                $("#startDateTitle").hide();
                $("#startDateData").hide();
                $("#endDateTitle").hide();
                $("#endDateData").hide();
                $("#countTitle").hide();
                $("#countData").hide();
            } else {
                $("#categoryIdTitle").hide();
                $("#categoryIdData").hide();
                $("#startDateTitle").hide();
                $("#startDateData").hide();
                $("#endDateTitle").hide();
                $("#endDateData").hide();
                $("#countTitle").hide();
                $("#countData").hide();
            }
        });

        $.each($(".datetimepicker"),function(index,item){
            $(item).datetimepicker({
                format: 'yyyy-mm-dd hh:ii:ss',
                autoclose: true,
                language : 'zh-CN'
            });
        });

        // 表单验证
        $inputForm.validate({
            rules: {
                count: {
                    required: true,
                    integer: true,
                    min: 1
                }
            },
            submitHandler: function(form) {
                first = null;
                generateCount = 0;
                generateTime = 0;
                type = $type.val();
                categoryId = $categoryId.val();
                startDate = $startDate.val();
                endDate = $endDate.val();
                count = parseInt($count.val());
                $type.prop("disabled", true);
                $categoryId.prop("disabled", true);
                $startDate.prop("disabled", true);
                $endDate.prop("disabled", true);
                $count.prop("disabled", true);
                $submit.prop("disabled", true);
                $("#statusTitle").show();
                $("#statusData").show();
                generate();
                return false;
            }
        });

        function generate() {
            if (type == 3) {
                $status.text("正在生成静态  [" + (first == null ? 1 : first) + " - " + (first + count) + "]");
            } else {
                $status.text("正在生成静态");
            }
            $.ajax({
                url: "${base}/admin/html/generate",
                type: "POST",
                data: {"type": type, "categoryId": categoryId, "startDate": startDate, "endDate": endDate, "first": first, "count": count},
                dataType: "json",
                cache: false,
                success: function(response) {
                    if(response.type=="success"){
                        generateCount += response.data.generateCount;
                        generateTime += response.data.generateTime;
                        if (!response.data.isCompleted) {
                            if (type == 3) {
                                first = response.data.first;
                            }
                            generate();
                        } else {
                            $type.prop("disabled", false);
                            $categoryId.prop("disabled", false);
                            $startDate.prop("disabled", false);
                            $endDate.prop("disabled", false);
                            $count.prop("disabled", false);
                            $submit.prop("disabled", false);
                            $("#statusTitle").hide();
                            $("#statusData").hide();
                            $status.empty();
                            var time;
                            if (generateTime < 60000) {
                                time = (generateTime / 1000).toFixed(2) + "秒";
                            } else {
                                time = (generateTime / 60000).toFixed(2) + "分";
                            }
                            alert("生成静态成功 [生成数: " + generateCount + " 耗时: " + time + "]");
                        }
                    }else{
                        alert(response.msg);
                    }
                }
            });
        }

    });
</script>
